@extends("admin.layout.main")
@section('content')
    <div id="app">
        <div style="margin-bottom:20px;font-size: 28px;font-weight: bold ">物流查询入口 </div>
        <div>
            <span style="width: 100px;display: inline-block">
                 <Upload action="/admin/order/logistics/task" :data="data"  :on-success="onSucc"  :show-upload-list="showUpList">
                    <i-button icon="ios-cloud-upload-outline">文件上传</i-button>
                </Upload>
            </span>
            <a href="/demo/物流.xlsx" style="margin-left: 15px;font-weight: bold">上传模板</a>
            <a href="http://yun.zhuzhufanli.com/mini/doc/com/" style="margin-left: 15px;font-weight: bold">公司拼音对照说明</a>
            <a :href="loadLink" style="margin-left: 15px;font-weight: bold">物流导出</a>

        </div>
        <div>
            <span style="width: 100px;display: inline-block">
                 <Upload action="/admin/order/logistics/tmp_task" :data="data"  :on-success="onSucc"  :show-upload-list="showUpList">
                    <i-button icon="ios-cloud-upload-outline">临时上传(无需订单编号)</i-button>
                </Upload>
            </span>

        </div>

        <div v-if="tasks.length" style="margin-top: 10px ">
            <span style="font-weight: bold">查询进度 : </span>
            <span v-for="task of tasks" :key="task.tag" style="font-weight: bold;display: inline-block;padding: 5px">
                <span :style="task.flag ? {color:'green'} : {color:'red'}">@{{task.msg}}</span>
            </span>
            
        </div>

        <div style="margin-top: 10px">
            <i-table ref="selection" :data="tableData" :columns="tableColumns" stripe
                     style="width: 100% !important;">
            </i-table>
        </div>


    </div>
    <script src="/js/vue.js"></script>
    <script src="/js/iview.js"></script>
    <script src="/js/axios.min.js"></script>

    <script>
        let vm = new Vue({
            el: '#app',
            data() {
                return {
                    data:{
                        token : '',
                    },
                    showUpList:false,
                    token: '',
                    tasks:[],
                    tableData: [],
                    tableColumns: [
                        {
                            title: '序号',
                            width: '100',
                            key:'id'
                        },
                        {
                            title: '快递单号',
                            width: '200',
                            render:(h,params) => {
                                let kddh = params.row.kddh;
                                let wuliuzhuangtai = params.row.wuliuzhuangtai;
                                let color = 'green';
                                let size = '12px';
                                if(wuliuzhuangtai == '无物流'){
                                    color = 'red';
                                }
                                return h('div',{
                                    style:{
                                        'color':color,
                                        'font-size':size
                                    },
                                },kddh)
                            }
                        },
                        {
                            title: '物流状态',
                            width: '200',
                            key: 'wuliuzhuangtai'
                        },
                        {
                            title: '快递公司',
                            width: '200',
                            key: 'kdgs'
                        },
                        {
                            title: '物流更新时间',
                            width: '200',
                            key: 'zuixinshijian',
                        },

                        {
                            title: '详细物流',
                            key: 'xiangxiwuliu'
                        }

                    ],
                }
            },
            mounted() {
                this.token = window.localStorage.getItem('current_user');
                this.data.token = this.token;
                this.$Message.config({
                    top: 90,
                    duration: 3
                });
            },
            methods: {
                onSucc(response){
                    if(response.code == 200){
                        for(item of response.result){

                            this.tasks.push({
                                'taskname' : item.msg,
                                'tag' : item.tag,
                                'msg' : '快递公司'+item.tag+'正在查询',
                                'flag' : 0,
                            })

                        }
                    }else{
                        this.$Message.info(response.msg);
                        return;
                    }
                    that = this;
                    this.$Message.info('上传成功 请耐心等待 查询大概需要1-2分钟');
                    let index = 1;
                    for(let t of that.tasks){
                        let itt = 'interval_'+index;
                        itt = setInterval(function(){
                            if(t.flag == 1){
                                clearInterval(itt);
                                return;
                            }
                            that.task(t.taskname);
                        },5357 + index*2564);
                        index++;
                    }

                },
                /*
                * 获取任务情况
                * */
                task(task_name) {
                    let that = this;
                    //获取所有物流号
                    tags = [];
                    if(this.tableData.length > 0){
                        for(t of this.tableData){
                            tags.push(t.kddh);
                        }
                    }

                    axios.post("/admin/order/logistics/query", {
                        token:vm.token,
                        taskname: task_name,
                    })
                        .then(function (response) {
                            data = response.data;
                            if(data.code == 200){
                                for(item of data.result){
                                    let flag = false;
                                    if(tags.length > 0){
                                        for(i of tags){
                                            if(i == item.kddh){
                                                flag = true;
                                                break;
                                            }
                                        }
                                    }
                                    if(!flag){
                                        that.tableData.push(item);

                                    }
                                }
                                for(task of that.tasks){
                                    if(task.taskname == task_name){
                                        task.flag = 1;
                                        task.msg = '快递公司'+task.tag+"查询完成";
                                    }
                                }
                                let tmp_index = 1;
                                for(it of that.tableData){
                                    it.id = tmp_index;
                                    tmp_index++;
                                }
                            }
                        })
                        .catch(function (error) {
                            this.$Message.error('服务器异常');
                        });

                },
                /*
                * 睡眠函数
                * */
                sleep(numberMillis) {
                    var now = new Date();
                    var exitTime = now.getTime() + numberMillis;
                    while (true) {
                        now = new Date();
                        if (now.getTime() > exitTime)
                            return;
                    }
                }
            },
            computed:{
                loadLink:function(){
                    data = [];
                    for (t of this.tasks){
                        data.push(t.taskname);
                    }
                    data = JSON.stringify(data);
                    return '/admin/order/logistics/export?data='+data+'&token='+this.token;
                }
            }

        });


    </script>
@endsection

